<template>
  <div class="tag-container">
    <div class='tag-select' :class="{'tag-selectmin': isBtnOpen == false, 'tag-selectmax': isBtnOpen == true}" ref="tagSelect">
      <Tag color="blue" checkable @on-change="checkedAllMethod" :checked="checkedAll" ref="checkAll" class="check-all">
        全部
      </Tag>
      <Tag class='check-single' v-for="(tag, index) in tags" :key="index" color="blue" checkable @on-change="checked" :checked="tag.checked" :name="index" ref="subTag">{{ tag.title }}
      </Tag>
    </div>
    <a v-if="flexWrap" class="tag-btn" @click="isBtnOpen = !isBtnOpen">
      {{ isBtnOpen ? '收起' : '展开' }}
      <Icon :type="isBtnOpen ? 'chevron-up': 'chevron-down'"></Icon>
    </a>
  </div>
</template>
<script>
export default {
  name: 'TagSelect',
  props: {
    tags: {
      type: Array
    }
  },
  data() {
    return {
      checkedAll: false,
      flexWrap: false,
      isBtnOpen: false
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.isFlexWrap()
      this.reloadTagStatus()
    })
    window.onresize = () => {
      this.isFlexWrap()
    }
  },
  destroyed() {
    window.onresize = () => {}
  },
  created() {
    this.tags.forEach(single => {
      this.checkedAll = this.checkedAll && single.checked
    })
  },
  methods: {
    isFlexWrap() {
      let parent = document.getElementsByClassName('tag-select')[0]
      let checkall = document.getElementsByClassName('check-all')[0]
      let checksingle = document.getElementsByClassName('check-single')[0]
      let x = parent.offsetWidth
      let y = checkall.offsetWidth
      let secondtag = document.getElementsByClassName('check-single')[1]
      if (this.tags.length <= 1) {
        this.flexWrap = false
      } else {
        // c = tag的margin
        let a = checksingle.getBoundingClientRect().left
        let b = secondtag.getBoundingClientRect().left
        let c = b - a - checksingle.offsetWidth
        // z = 所有tag的宽度和
        let w = 0
        for (let i = 0; i < document.getElementsByClassName('check-single').length; i++) {
          w += document.getElementsByClassName('check-single')[i].offsetWidth
        }
        let z = w + c * (this.tags.length + 1)
        if (x <= y + z) {
          this.flexWrap = true
        } else {
          this.flexWrap = false
        }
      }
    },
    checked(checked, index) {
      this.tags[index].checked = checked
      this.checkedAll = true
      this.tags.forEach(single => {
        this.checkedAll = this.checkedAll && single.checked
      })
      this.reloadTagStatus()
      if (name === undefined) {
        this.$emit('onChange', checked)
      } else {
        this.$emit('onChange', checked, index)
      }
    },
    checkedAllMethod(checked) {
      this.checkedAll = checked
      this.tags.forEach(single => {
        single.checked = checked
      })
      this.reloadTagStatus()
      this.$emit('onAllChange', checked)
    },
    reloadTagStatus() {
      this.$refs.checkAll.isChecked = this.checkedAll
      for (let index in this.tags) {
        this.$refs['subTag'][index].isChecked = this.tags[index].checked
      }
    }
  }
}
</script>
<style scoped>
.tag-selectmax {
  user-select: none;
  position: relative;
  overflow: hidden;
  max-height: 100%;
  line-height: 32px;
  transition: all 0.3s;
}
.tag-selectmin {
  user-select: none;
  position: relative;
  overflow: hidden;
  max-height: 32px;
  line-height: 32px;
  transition: all 0.3s;
}

.tag-selectmax .ivu-tag {
  padding: 0 8px;
  margin-right: 24px;
  font-size: 14px;
}
.tag-selectmin .ivu-tag {
  padding: 0 8px;
  margin-right: 24px;
  font-size: 14px;
}

.tag-container {
  display: flex;
}
.tag-btn {
  width: 80px;
  margin-top: 8px;
  font-size: 14px;
}
</style>
